<template>
    <el-card shadow="hover" style="height: 800px; width: 100%; margin-left: 10px; overflow: scroll">
        <data-permission ref="dataPower" v-model="staffDataPermission"></data-permission>
    </el-card>
    {{ visible }}
    <div
        style="width: 100%; height: 70px; position: absolute; bottom: 0; border-top: 0px solid #e8e8e8; padding-top: 10px">
        <el-button style="margin-left: 30px" @click="close()">取 消</el-button>
        <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        <!-- <el-button v-if="mode != 'show' && staffDataPermission.id != 0 && !isMultiply" type="primary"
            :loading="delLoading" @click="del()">删 除</el-button> -->
        <el-popconfirm v-if="mode != 'show' && staffDataPermission.id != 0 && !isMultiply" title="确定要删除吗？"
            @confirm="del()">
            <template #reference>
                <el-button type="primary" :loading="delLoading">删 除</el-button>
            </template>
        </el-popconfirm>
    </div>
</template>
<script>
import dataPermission from './components/dataPermission.vue'

export default {
    emits: ['success', 'closed'],
    porps: [],
    components: {
        dataPermission
    },
    data() {
        return {
            data: {},
            staffDataPermission: {
                id: 0,
                staffId: 0,
                powerId: 0,
                area: [],
                province: [],
                city: [],
                custom: []
                // businessScenario: []
            },
            isMultiply: false,
            staffIds: [],
            isSaveing: false,
            delLoading: false
        }
    },
    mounted() {


    },

    methods: {
        close() {
            this.$emit('closed')
        },
        async open(data, staffId, isMultiply, staffIds) {
            this.isMultiply = isMultiply
            if (!isMultiply) {
                //根据角色ID查询数据权限
                var res = await this.$API.basic.staff.queryDataPowerByMenu.post({ data: { staffId: staffId, powerId: data.id } })
                if (res && res.code == 0 && res.data) {
                    // this.staffDataPermission = res.data
                    this.staffDataPermission.id = res.data.id ? res.data.id : 0
                    this.staffDataPermission.area = res.data.area ? res.data.area.split(',') : []
                    this.staffDataPermission.province = res.data.province ? res.data.province.split(',') : []
                    this.staffDataPermission.city = res.data.city ? res.data.city.split(',') : []
                    this.staffDataPermission.custom = res.data.custom ? res.data.custom.split(',') : []

                }
                this.staffDataPermission.powerId = data.id
                this.staffDataPermission.staffId = staffId

            } else {
                this.staffIds = staffIds
                this.staffDataPermission.powerId = data.id
            }
        },
        async submit() {
            let validate = this.$refs.dataPower.validate()
            if (validate) {
                this.$message.warning(validate)
                return false
            } else {
                this.isSaveing = true

                let data = {}
                data.id = this.staffDataPermission.id
                data.area = this.staffDataPermission.area.join(',')
                data.province = this.staffDataPermission.province.join(',')
                data.city = this.staffDataPermission.city.join(',')
                data.custom = this.staffDataPermission.custom.join(',')

                if (this.isMultiply) {
                    let req = this.staffIds.map((item) => {
                        return { ...{ staffId: item, }, ...data }
                    })
                    var res = await this.$API.basic.staff.batchSetMenuDataPower.post({ data: req })
                    if (res && res.code == 0) {
                        this.isSaveing = false
                        this.visible = false
                        this.$message.success('操作成功')
                        this.$emit('success')
                    }
                } else {
                    data.staffId = this.staffDataPermission.staffId
                    data.powerId = this.staffDataPermission.powerId

                    var res = await this.$API.basic.staff.setMenuDataPower.post({ data: data })
                    if (res && res.code == 0) {
                        this.isSaveing = false
                        this.visible = false
                        this.$message.success('操作成功')
                        this.$emit('success')
                    }
                }
            }
        },
        async del() {
            this.delLoading = true
            //删除数据权限
            var res = await this.$API.basic.staff.deleteMenuStaffDataPower.post({ data: { staffId: this.staffDataPermission.staffId, powerId: this.staffDataPermission.powerId } })
            if (res && res.code == 0) {
                this.isSaveing = false
                this.visible = false
                this.$message.success('操作成功')
                this.$emit('success')
            }
            this.delLoading = false
        }
    }
}
</script>

<style scoped>
/* 设置选择器的宽度和圆角 */
.custom-select {
    width: 100%;
    border-radius: 8px;
}
</style>
